<!-- blog-detail -->
<template>
  <div>
    <div
      class="blog-top-img"
      :style="'background-image: url(' + detail.article_pic + ');'"
    >
      <div class="top-content">
        <div class="top-title">{{ detail.article_title }}</div>
        <div class="margin-tb flex align-center">
          <div>
            <i class="el-icon-folder-opened"></i>分类于
            <span :class="[getRandcolor(), 'top-tag']">{{
              detail.cate_name
            }}</span>
          </div>
          <div class="margin-left">
            <i class="el-icon-price-tag"></i>标签:
            <span
              v-for="(item, index) in detail.tags"
              :key="index"
              :class="[getRandcolor(), 'top-tag']"
              >{{ item }}</span
            >
          </div>
        </div>
        <div class="margin-bottom flex align-center">
          <div class="top-avatar">
            <img
              src="https://upload.jianshu.io/users/upload_avatars/25723399/059de1c8-3335-49f4-bfce-2b5b89481ab2?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"
            />
          </div>
          <div class="margin-left-xs">
            <span><i class="el-icon-user-solid"></i> Rinvay</span>
            &nbsp;&nbsp;&nbsp;&nbsp;<span
              ><i class="el-icon-alarm-clock margin-right-xs"></i
              >{{ detail.add_time | dateTimeFilter(true) }}</span
            >
            &nbsp;&nbsp;&nbsp;&nbsp;<span
              ><i class="el-icon-view margin-right-xs"></i
              >{{ detail.visit }}浏览</span
            >&nbsp;&nbsp;&nbsp;&nbsp;<span
              ><i class="el-icon-edit margin-right-xs"></i
              >{{ detail.words }}字数</span
            >
          </div>
        </div>
      </div>
    </div>
    <MarkDown
      :value="detail.article_content"
      v-if="detail.article_content"
    ></MarkDown>
    <Comment :aid="detail.id" v-if="detail.id"></Comment>
  </div>
</template>

<script>
import MarkDown from "@/view/MarkDown";
import { blogDetail } from "@/apiv/article";
export default {
  components: {
    MarkDown,
  },
  data() {
    return {
      colors: [
        "bg-orange",
        "bg-purple",
        "bg-green",
        "bg-red",
        "bg-yellow",
        "bg-blue",
      ],
      detail: {},
    };
  },
  mounted() {
    this.handleDetail();
  },
  methods: {
    handleDetail() {
      let id = this.$route.params.id;
      blogDetail(id).then((res) => {
        let addObj = {
          author: "Rinvay",
          words: res.data.article_content.toString().length,
        };
        this.detail = Object.assign(res.data, addObj);
      });
    },
    getRandcolor() {
      let r = Math.floor(Math.random() * 6);
      return this.colors[r];
    },
  },
};
</script>
<style lang='scss' scoped>
.blog-top-img {
  position: relative;
  width: 100%;
  height: 50vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-origin: border-box;
}
.top-content {
  position: absolute;
  width: 940px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  color: rgb(255, 255, 255);
  .top-title {
    line-height: 1.5em;
    font-size: 32px;
  }
  .top-tag {
    padding: 4px 8px;
    margin: 0 3px;
    border-radius: 2px;
    font-size: 10px;
  }
}
.blog-top-img::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.blog-top-img img {
  width: 35px;
  height: 35px;
  border-radius: 100%;
  margin-right: 12px;
}
</style>